<template>
  <div id="oldTable" v-if="headerData.length && tableData.length">
    <div class="table-scroll-mod" :style="{height: height+ 'px'}">
      <div class="table-scroll-box" :style="{height: height+ 'px'}" ref="tableScrollBox">
        <div class="fixed-head" ref="tableFixedHead">
          <table>
            <thead>
            <tr>
              <th v-if="checkBox" :width="checkBoxWidth">
                <div class="te_cell"><input type="checkbox" v-model="isAllCheck" @click="checkAll" name="table"
                                            value="all"/></div>
              </th>
              <th :width="item.width || 100" v-for="(item, index) in headerCol" :key="index"
                  v-if="item.prop !== 'checkbox'">
                <div class="te_cell">{{ item.label }}</div>
              </th>
            </tr>
            </thead>
          </table>
        </div>
        <div class="fixed-right" :class="isMac ? '' : 'fixed-right_h'" ref="tableFixedRight"
             :style="{width: (headerCol[rightIndex].width || 100) + 'px'}">
          <table>
            <thead>
            <tr>
              <td :width="headerCol[rightIndex].width">
                <div class="te_cell">{{ headerCol[rightIndex].label }}</div>
              </td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td :width="headerCol[rightIndex].width">
                <div class="te_cell">
                  <slot name="fixedRight" :row="item"></slot>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="fixedTopRight" :style="{width: (headerCol[rightIndex].width || 100) + 'px'}"><span class="te_cell">{{
            headerCol[rightIndex].label
          }}</span>
        </div>
        <table class="table-content__warrp">
          <thead>
          <tr>
            <th :width="item.width" v-for="(item, index) in headerCol" :key="index">
              <div class="te_cell">{{ item.label }}</div>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td :width="checkBoxWidth">
              <div class="te_cell" v-if="checkBox"><input type="checkbox" name="table" v-model="checkBoxList[index]"
                                                          @click="checkItem(item, index)" :value="index"/></div>
            </td>
            <td :width="child.width || 100" v-for="(child, index_c) in headerCol" :key="index_c"
                v-if="child.prop !== 'checkbox'" :draggable="draggable"
                @dragstart="onDragstart($event, item, child.prop)" @dragend="onDragend($event)"
                @dragover="onDragover($event)" @drop="onDrop($event, item, child.prop)">
              <div class="te_cell" v-if="child.slot">
                <slot :name="child.slot" :row="item"></slot>
              </div>
              <div class="te_cell" v-if="!child.slot">{{ item[child.prop] }}</div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
const IS_MAC = function () {
  return /macintosh|mac os x/i.test(navigator.userAgent);
}();

function throttle(delay, noTrailing, callback, debounceMode) {
  var timeoutID;
  var cancelled = false;
  var lastExec = 0;

  function clearExistingTimeout() {
    if (timeoutID) {
      clearTimeout(timeoutID);
    }
  }

  function cancel() {
    clearExistingTimeout();
    cancelled = true;
  }

  if (typeof noTrailing !== 'boolean') {
    debounceMode = callback;
    callback = noTrailing;
    noTrailing = undefined;
  }

  function wrapper() {
    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
      arguments_[_key] = arguments[_key];
    }
    var self = this;
    var elapsed = Date.now() - lastExec;
    if (cancelled) {
      return;
    }

    function exec() {
      lastExec = Date.now();
      callback.apply(self, arguments_);
    }

    function clear() {
      timeoutID = undefined;
    }

    if (debounceMode && !timeoutID) {
      exec();
    }
    clearExistingTimeout();
    if (debounceMode === undefined && elapsed > delay) {
      exec();
    } else if (noTrailing !== true) {
      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
    }
  }

  wrapper.cancel = cancel;
  return wrapper;
}

export default {
  name: 'TestTable',
  data() {
    return {isMac: IS_MAC, checkBoxWidth: 40, checkBoxList: [], isAllCheck: false}
  },
  props: {
    draggable: {type: Boolean, default: true},
    headerData: {type: Array, default: () => []},
    tableData: {type: Array, default: () => []},
    checkBox: Boolean,
    height: {type: Number, default: 500}
  },
  computed: {
    headerCol() {
      if (this.checkBox) {
        let _check = [{prop: 'checkbox', label: '', width: this.checkBoxWidth}]
        return [..._check, ...this.headerData]
      } else {
        return this.headerData
      }
    },
    rightIndex() {
      if (Array.isArray(this.headerData) && this.headerData.length) {
        return this.headerCol ? this.headerData.length : this.headerData.length - 1
      } else {
        return 0
      }
    }
  },
  watch: {
    tableData: {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.checkBoxList = Array(this.tableData.length).fill(false)
        }
      }, immediate: true, deep: true
    }
  },
  activated() {
  },
  created() {
  },
  methods: {
    onDragstart(event, row, prop) {
      this.$emit('drag-start', {event, row, prop});
    },
    onDragend(event) {
      this.$emit('drag-drop-end', {event});
    },
    onDrop(event, row, prop) {
      this.$emit('drag-drop', {event, row, prop});
    },
    onDragover(event) {
      event.preventDefault();
    },
    checkAll() {
      this.checkBoxList = this.checkBoxList.map((v) => !this.isAllCheck)
      this.isAllCheck = !this.isAllCheckthis.$emit('checkList', this.isAllCheck ? this.tableData : [])
    },
    checkItem(row) {
      if (this.isAllCheck) this.isAllCheck = falsethis.$emit('checkList', [row])
    },
    getMultipleSelection() {
      let _list = []
      this.tableData.forEach((v, index) => {
        if (this.checkBoxList[index]) {
          _list.push(v)
        }
      })
      return _list
    },
    bodyScroll() {
      let scrollLeft = this.box.scrollLeftlet,
          scrollTop = this.box.scrollToplet,
          fixedHead = this.$refs.tableFixedHeadfixedHead.scrollLeft = scrollLeftif(scrollLeft > this.fixedHead.scrollLeft)
      {
        this.box.scrollLeft = this.fixedHead.scrollLeft
      }
      let fixedLeft = this.$refs.tableFixedRightfixedLeft.scrollTop = scrollTopif(scrollTop > this.fixedLeft.scrollTop)
      {
        this.box.scrollTop = this.fixedLeft.scrollTop;
      }
    },
    headScroll() {
      let scrollLeft = this.fixedHead.scrollLeftlet
      box = this.$refs.tableScrollBoxbox.scrollLeft = scrollLeft
    },
    fixedLeftScroll() {
      let scrollTop = this.fixedLeft.scrollTopthis.box.scrollTop = scrollTop
    },
    initTable() {// 内容滚动区域监听联动头部区域
      this.box = this.$refs.tableScrollBoxthis.box && this.box.addEventListener('scroll', this.bodyScroll, false);// 头部滚动区域监听联通内容区域
      this.fixedHead = this.$refs.tableFixedHead;
      this.fixedHead && this.fixedHead.addEventListener('scroll', this.headScroll, false);
      // 固定左侧滚动监听联动内容
      this.fixedLeft = this.$refs.tableFixedRight;
      if (this.isMac) {
        this.fixedLeft && this.fixedLeft.addEventListener('scroll', this.fixedLeftScroll, false)
      } else {
        this.fixedLeft && this.fixedLeft.addEventListener('scroll', throttle(300, this.fixedLeftScroll), false)
      }
    }
  }, mounted() {
    this.initTable()
  }, components: {}, beforeDestroy() {
    this.box.removeEventListener('scroll', this.bodyScroll, false)
    this.fixedHead.removeEventListener('scroll', this.headScroll, false)
    this.fixedLeft.removeEventListener('scroll', this.fixedLeftScroll, false)
  },
  destroyed() {
  }
}
</script>

<style lang="scss">
#oldTable {
  .table-scroll-mod {
    position: relative;
    overflow: hidden;
    border: 1px solid #ebeef5;
  }

  .table-scroll-box {
    white-space: nowrap; /*overflow: scroll;*/
    overflow-x: scroll;
    z-index: 2001;

    .te_cell {
      line-height: 23px;
      padding: 0 5px;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
  }

  .table-content__warrp {
    td, thead th {
      border-color: #ddd;
      padding: 6px 0;
      font-size: 12px;
    }

    thead th {
      padding: 8px 0;
    }

    td:not(:last-of-type) {
      border-right: 1px solid #ddd;
      box-sizing: border-box;
    }

    tr:not(:last-of-type) {
      border-bottom: 1px solid #ddd;
      box-sizing: border-box;
    }

    background-color: #fff;
  }

  .table-scroll-box > table {
    overflow-x: scroll;
    overflow-y: scroll;
  }

  .table-scroll-box > table tr {
    display: -webkit-flex;
  }

  .table-scroll-box .fixed-head {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%; /*width: calc(100% - 8px);*/
    overflow-x: scroll;
    border-color: #ddd;
    background: #f8f9fb;

    th {
      text-align: center;
      color: #333633;
      font-size: 14px;
      font-weight: inherit;
      padding: 8px 0;
    }

    th:not(:last-of-type) {
      border-right: 1px solid #ddd;
      box-sizing: border-box;
    }
  }

  .table-scroll-box .fixed-head::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  .table-scroll-box .fixed-head::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  .table-scroll-box .fixed-head > table {
    overflow-x: scroll;
  }

  .table-scroll-box .fixed-head > table tr {
    display: -webkit-flex;
  }

  .fixed-right {
    height: 100%;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    right: -2px;
    z-index: 999;

    td {
      text-align: center;
      color: #333633;
      font-size: 14px;
      background-color: #fff;
      font-weight: inherit;
      padding: 5px 0;
    }

    thead td {
      padding: 8px 0;
    }

    tbody td {
      padding: 6px 0;
    }

    table {
      margin: 0;
    }

    tr:not(:last-of-type) {
      border-bottom: 1px solid #ddd;
      box-sizing: border-box;
    }

    box-shadow: 0 0 10px rgba(0, 0, 0, .12);
  }

  .table-scroll-box .table-content__warrp::-webkit-scrollbar {
    background-color: red;
  }

  .fixed-right_h {
    height: calc(100% - 17px) !important;
  }

  .fixedTopRight {
    height: 22px;
    width: 240px;
    background: #f8f9fb;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1001;
    line-height: 22px;
    color: #333633;
    font-size: 14px;
    font-weight: inherit;
    padding: 9.5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>